<template>
    <div id="app" class="app">
        <div class="main" id="main">
            <div class="container">
                <keep-alive>
                    <component v-bind:is="currentTabComponent"></component>
                </keep-alive>
            </div>
            <footer class="appfooter dyf">
                <span @click="currentTabComponent = 'home'"> home </span>
                <span @click="currentTabComponent = 'my'"> my </span>
            </footer>
        </div>
        <transition :name="transanim" mode="in-out" build:release>
            <keep-alive :include="keeplivepages">
                <router-view class="sub_page"></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<script>
var loadcomponent = require("static/script/import.js");
var store = require("static/script/store.js");
var router = require("static/script/router.js");
export default {
    name: "App",
    components: {
        home: loadcomponent("static/view/home.vue"),
        my: loadcomponent("static/view/my.vue"),
    },
    data: function () {
        return {
            keeplivepages: "setting",
            tabindex: 0,
            tabcomponents: ["home", "my"],
            currentTabComponent: "home",
            appdata: {},
            transanim: "slide-left",
        };
    },
    router: router,
    store: store,
    created: function () {},
    mounted: function () {
        var self = this;
    },
    watch: {
        $route(to, from) {},
    },
    methods: {},
};
</script>
